<template>
	<view class="container">
		<view class="print">
			<view class="printname">SunmiPrint<text class="green" v-if="IsConn">（已连接）</text><text class="red" v-else>（连接中...）</text></view>
		</view>
		<view class="square">
			<view class="title">{{ComName}}</view>
			<view class="title">当场行政处罚决定书</view>
			<view class="subtitle">{{Info.DocNum}}</view>
			<view class="line">当事人: {{Info.RealName}}</view>
			<view class="line">{{Info.PersonType==1?'身份证号':'统一社会信用代码'}}: {{Info.IDCard}}</view>
			<view class="line">{{Info.PersonType==1?'住址':'地址'}}: {{Info.Address}}</view>
			<view class="line indent" v-if="EasyChuFa1!=''">{{EasyChuFa1}}</view>
			<view class="line indent" v-if="EasyChuFa2!=''">{{EasyChuFa2}}</view>
			<view class="line indent" v-if="EasyChuFa3!=''">{{EasyChuFa3}}</view>
			<view class="line indent" v-if="EasyChuFa4!=''">{{EasyChuFa4}}</view>
			<view class="line indent" v-if="EasyChuFa5!=''">{{EasyChuFa5}}</view>
			<view class="line indent">执法人员: {{Info.ZBRRealName}}</view>
			<view class="line indent" style="margin-top:-5rpx;">执法证号: {{Info.ZBRLawNum}}</view>
			<view class="line indent">执法人员: {{Info.XBRRealName}}</view>
			<view class="line indent" style="margin-top:-5rpx;">执法证号: {{Info.XBRLawNum}}</view>
			<view class="line indent">当事人签名: </view>
			<view class="line"><image class="signname" :src="Tools.GetImg(Info.SignName,500)" mode="aspectFit"></image> </view>
			<view class="imgview">
				<view class="img1"><image :src="PayEwm"/></view>
				<view class="img2"><image :src="Chapter"/></view>
			</view>
			<view class="scan"><view class="txt1">扫码缴费</view><view class="txt2">{{Info.CreateDate.ToDateTwo()}}</view></view>
		</view>
		<yz-qr :qrPath.sync="PayEwm" :text="PayPath" quality="L" colorDark="#000000" colorLight="#ffffff" style="position: absolute; left:-1000px;"></yz-qr>
		<canvas :style="'width: 100px; height: 40px; position: absolute; left:-1000px; bottom:-1000px;'" canvas-id="signname"></canvas>
		<canvas :style="'width: 192px; height: 100px; position: absolute; left:-1000px; bottom:-1000px;'" canvas-id="chapter"></canvas>
		<view class="btn">
			<button class="publishs" @click="Print" v-if="IsReady && IsConn">打印</button>
			<button class="publishs graybg" v-else>请稍候...</button>
		</view>
		
	</view>
</template>

<script>
	//#ifdef APP
	const print = uni.requireNativePlugin('Sunmi-Print-Inner')
	//#endif
	export default {
		data() {
			return {
				ID:0,
				Info:{ID:0},
				Chapter:'',
				ComName:'',
				PayEwm:'',
				PayPath:'',
				EasyChuFa1:'',
				EasyChuFa2:'',
				EasyChuFa3:'',
				EasyChuFa4:'',
				EasyChuFa5:'',
				IsConn:false,
				IsReady:false,
				SignNameBase64:'',
				ChapterBase64: '',
			};
		},
		onLoad(options) {
			this.ID=options.ID;
			this.Find_EasyInfo();
			print.connect(res => {
				this.IsConn = res.connect == "hello"
			})
		},
		methods:{
			Find_EasyInfo(){
				var data = {};
				data.ID=this.ID;
				data.Act="Find_EasyInfo";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;
					this.Chapter = json.Data.Chapter;
					this.ComName=json.Data.ComName;
					this.PayPath = json.Data.PayPath;
					this.EasyChuFa1 = json.Data.EasyChuFa1;
					this.EasyChuFa2 = json.Data.EasyChuFa2;
					this.EasyChuFa3 = json.Data.EasyChuFa3;
					this.EasyChuFa4 = json.Data.EasyChuFa4;
					this.EasyChuFa5 = json.Data.EasyChuFa5;
					this.Util.InitImg_Easy_Sunmi("signname", 100, 40, this.Info.SignName.GetImg(500),() => {
						this.Util.GetBase64("signname", 100, 40, data=>{
							this.SignNameBase64 = data;
						});
					});
					this.GetEwm(() => {
						this.Util.InitImg_Park_Sunmi(this.PayEwm, this.Chapter,() => {
							this.Util.GetBase64("chapter", 192, 100 , data=>{
								this.IsReady = true;
								this.ChapterBase64 = data;
							});
						});
					});
				});
			},
			GetEwm(callback){
				var time = setInterval(()=>{
					if(this.PayEwm!=""){
						clearInterval(time);
						if(callback){callback();}
					}
				},200);
			},
			Print(){
				if(this.Base64=="" || !this.IsConn){
					this.Util.Toast("打印机尚未就绪，请稍后再试！");
					return;
				}
				this.Util.Loading("打印中...");
				print.printText({text:this.ComName,align:1,size:32, bold:true});
				print.printText({text:"当场行政处罚决定书",align:1,size:25, bold:true});
				print.printText({text:this.Info.DocNum,align:1,size:24, bold:true});
				print.printDividingline({style:"4",height:"30"}); //换行
				print.printText({text:"当事人: "+this.Info.RealName,align:0,size:24, bold:true});
				print.printText({text:(this.Info.PersonType==1?'身份证号: ':'统一社会信用代码: ')+this.Info.IDCard,align:0,size:24, bold:true});
				print.printText({text:(this.Info.PersonType==1?'住址: ':'地址: ')+this.Info.Address,align:0,size:24, bold:true});
				if(this.EasyChuFa1!=""){print.printDividingline({style:"4",height:"10"}); print.printText({text:"    "+this.EasyChuFa1,align:0,size:24, bold:true});}
				if(this.EasyChuFa2!=""){print.printDividingline({style:"4",height:"10"}); print.printText({text:"    "+this.EasyChuFa2,align:0,size:24, bold:true});}
				if(this.EasyChuFa3!=""){print.printDividingline({style:"4",height:"10"}); print.printText({text:"    "+this.EasyChuFa3,align:0,size:24, bold:true});}
				if(this.EasyChuFa4!=""){print.printDividingline({style:"4",height:"10"}); print.printText({text:"    "+this.EasyChuFa4,align:0,size:24, bold:true});}
				if(this.EasyChuFa5!=""){print.printDividingline({style:"4",height:"10"}); print.printText({text:"    "+this.EasyChuFa5,align:0,size:24, bold:true});}
				print.printDividingline({style:"4",height:"30"}); //换行
				print.printText({text:"    执法人员: "+this.Info.ZBRRealName,align:0,size:24, bold:true});
				print.printText({text:"    执法证号: "+this.Info.ZBRLawNum,align:0,size:24, bold:true});
				print.printText({text:"    执法人员: "+this.Info.XBRRealName,align:0,size:24, bold:true});
				print.printText({text:"    执法证号: "+this.Info.XBRLawNum,align:0,size:24, bold:true});
				print.printDividingline({style:"4",height:"20"}); //换行
				print.printText({text:"    当事人签名: " ,align:0,size:24, bold:true});
				if(this.Info.SignName==""){
					print.printDividingline({style:"4",height:"60"}); //换行
				}else{
					print.printBitmap({base64:this.SignNameBase64,align:1});
				}
				print.printDividingline({style:"4",height:"10"}); //换行
				print.printBitmap({base64:this.ChapterBase64,align:0});
				print.printText({text:"   扫码缴费         " + this.Info.CreateDate.ToDateTwo() ,align:0,size:24, bold:true});
				print.printDividingline({style:"4",height:"60"}); //换行
				print.printDividingline({style:"4",height:"60"}); //换行
				this.Util.HideLoading();
			}
			
		}
	}
</script>

<style lang="scss">
	.container{width:100%; padding-top:30rpx; padding-bottom:140rpx;
		.print{width:100%; height:90rpx; line-height: 80rpx; font-size:32rpx; padding-left:3%; display: flex; flex-direction: row;
			.printname{flex:1;}
			.printbtn{width:150rpx;}
		}
		.square{width:94%; margin-left:3%; height:auto; border-radius: 10rpx; background-color: #ffffff; padding:40rpx; display: flex; flex-direction: column;
			.title{width:100%; height:70rpx; line-height: 70rpx; font-size:40rpx; text-align: center;}
			.subtitle{width:100%; height:60rpx; line-height: 60rpx; font-size:30rpx; text-align: center;}
			.line{width:100%; height:auto; min-height: 50rpx; line-height:50rpx; margin-top:20rpx; font-size:32rpx; color:#696969;
				.chapter{width:240rpx; height:240rpx;}
				.signname{width:300rpx; height:150rpx;}
			}
			.imgview{display: flex; flex-direction: row; justify-content: space-between; margin-top:20rpx;
				.img1{width:240rpx; height:240rpx; margin-top:10rpx; float:left; image{width:100%; height:100%;}}
				.img2{width:240rpx; height:240rpx; float:left; image{width:100%; height:100%;}}
			}
			.scan{width:100%; height:32rpx; font-size:32rpx; padding-top:10rpx; display: flex; flex-direction: row; justify-content: space-between;
				.txt1{width:240rpx; text-align: center;}
				.txt2{width:240rpx; text-align: center;}
			}
		}
	}
</style>
